@import '../../assets/css/_variable.less';

.fold-cont-box {
  margin: 10px;
  background: var(--aibox-b12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  user-select: none;

  &.on {
    background: var(--aibox-b13);
  }

  &.active {
    background: var(--aibox-b14);
    border: 1px solid var(--aibox-b2);
  }

  .fold-switch {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 30px;
    cursor: pointer;

    .f-s-title {
      flex: 1;
      margin: 0 10px 0 20px;
      overflow: hidden;
      color: var(--aibox-color);
      font-weight: bold;
      font-size: 14px;
      letter-spacing: 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .f-s-icon {
      color: var(--aibox-color);
      font-size: 16px;
      transform: rotate(0deg);
      transition: transform 0.1s;

      &.open {
        transform: rotate(180deg);
      }
    }

    .f-s-placeholder {
      display: inline-block;
      width: 16px;
      height: 16px;
      pointer-events: none;
    }
  }

  .fold-cont {
    padding: 20px;
    border-top: 1px solid var(--aibox-b15);
  }
}
